Limitless - Page Header
Page header - component that displays page title. Depending on the layout variation, page header can have white, light grey or transparent background color. By default hage header supports title, subtitle and optional components that appear on the right side of the header area.
All optional components are available in both panel header and page header components and use same markup, all of them are adapted to any height of the headers and always vertically centered. Custom components are collapsed on mobiles and tables and are visible on toggle button click.
| Component | Description |
|---|---|
| Buttons | All button options, including floating buttons |
| Button dropdowns | Button dropdowns with all available options |
| Labeled buttons | Transparent buttons with icon and text label |
| Input fields | All available input fields with options |
| Input groups | Input groups with all available options |
| Checkboxes, radios | Unstyled, styles, switchery toggles and Bootstrap switches |
| Selects | Default, Select2, Bootstrap select, Bootstrap multiselect and SelectBoxIt selects |
| File input | Single file input, styled and unstyled |
| Tabs | Tabs nav, available in panel header only |
| Pills | Pills nav, available in panel header only |
| Text, links | Text with links, all possible options |
| Labels, badges | Labels and badges in all variations |
| Icons | Single and multiple icons list |
| Pagination | Pagination and pager components in 3 sizes |
| Date picker | Date range picker attached to the button and with custom display format |
Page header markup
Page header markup is identical in all layouts, but in some layouts default page header classes can be different. This was made to reduce number of classes in markup if default page header style is different. Default page header markup is:
<!-- Page header -->
<div class="page-header page-header-default">
<!-- Page header content -->
<div class="page-header-content">
<!-- Page title -->
<div class="page-title">
<h4>
<i class="icon-arrow-left52 position-left"></i>
<span class="text-semibold">Horizontal Nav</span> - On Click
</h4>
</div>
<!-- /page title -->
<!-- Heading elements -->
<div class="heading-elements">
...
</div>
<!-- /heading elements -->
</div>
<!-- /page header content -->
</div>
<!-- /page header -->
Page header elements
The table above demonstrates what components can be ised in page header area. All these components are completely optional. All components are hidden on mobiles and tablets and can be reached by clicking toggle button on the right side of the header area, all components are displayed as block elements and appear below the page header. In future releases header components list will be extended with new components according to the functionality additions.
Example of page header components:
<!-- Page header -->
<div class="page-header page-header-default">
<!-- Page header content -->
<div class="page-header-content">
<!-- Page title -->
<div class="page-title">
<h4>
<i class="icon-arrow-left52 position-left"></i>
<span class="text-semibold">Horizontal Nav</span> - On Click
</h4>
</div>
<!-- /page title -->
<!-- Header elements -->
<div class="heading-elements">
<div class="heading-btn-group">
<a href="#" class="btn btn-link btn-float has-text">
<i class="icon-bars-alt text-primary"></i>
<span>Statistics</span>
</a>
<a href="#" class="btn btn-link btn-float has-text">
<i class="icon-calculator text-primary"></i>
<span>Invoices</span>
</a>
<a href="#" class="btn btn-link btn-float has-text">
<i class="icon-calendar5 text-primary"></i>
<span>Schedule</span>
</a>
</div>
</div>
<!-- /header elements -->
</div>
<!-- /page header content -->
</div>
<!-- /page header -->
Breadcrumb line component
By default, breadcrumbs component is placed inside custom <div class="breadcrumb-line" /> container. This container has a lot of different options, such as different placement, background and border color options, optional components etc. Similar to page header component, all breadcrumb line elements are collapsed on mobiles and tablets and appear on ly on toggle button click. For now, breadcrumb line elements support only buttons and labels with badges.
Default markup without breadcrumb line:
<!-- Breadcrumb line component -->
<div class="breadcrumb-line">
<!-- Breadcrumb itself -->
<ul class="breadcrumb">
...
</ul>
<!-- /breadcrumb itself -->
<!-- Breadcrumb line elements -->
<ul class="breadcrumb-elements">
...
</ul>
<!-- /breadcrumb line elements -->
</div>
<!-- /breadcrumb line component -->